Save style changes to css file

163 views
Skip to first unread message

mnk

unread,
Jan 6, 2010, 3:28:08 PM1/6/10
to Firebug
I really love firebug and everyday using it on websites development.
I think will be really helpful and save alot of my and other
developers time of firebug will save style changes to css file.
Maybe add "save" button to the toolbar?

Can anyone help me to add this feature or maybe this feature will be
added to the new version of firebug?

Thanks advance

Steven Roussey

unread,
Jan 6, 2010, 7:56:20 PM1/6/10
to Firebug
Have you checked out FireDiff?

Tobias Strebitzer

unread,
Jan 7, 2010, 5:11:10 AM1/7/10
to fir...@googlegroups.com
Hi mnk,

check out my firebug extension: FireFile (https://addons.mozilla.org/de/firefox/addon/52365/) saves css files to your remote web server (or locally) by using a server-side web service php script.

Easy installation:

Regards,
Tobias

2010/1/6 mnk <350...@gmail.com>
--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To post to this group, send email to fir...@googlegroups.com.
To unsubscribe from this group, send email to firebug+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/firebug?hl=en.



djn

unread,
Jan 7, 2010, 1:18:10 PM1/7/10
to Firebug
Hello Tobias!
I've tried out your extension and in the end decided not to use it -
because it is trying to do too much. Uploading straight to the server
might sure be a boon to some less technical user, but I believe saving
the modified CSS locally first would be a better deal to me because:
- I can use the local SVN setup to keep a history of versions
- I use SFTP only to upload stuff to the server (can't disable plain
FTP up there, but I definitely can avoid using it)
- I can validate, compress and merge CSS files with YUI Compressor and
CSSTidy

Would you consider adding 'Save to file' as an option to your
otherwise fine estension?

Thanks in advance
djn

Tobias Strebitzer

unread,
Jan 7, 2010, 1:59:31 PM1/7/10
to fir...@googlegroups.com
@djn:
I think i've got your point, although i think that you would meet your requirements by setting up a local development environment to work with before uploading to your server.

About saving files on demand:
Once Firebug is loaded, the css style rules and definitions lose their formatting, that's why i was using css tidy on the server side component to restore document format.

It would not be too difficult to handle this formatting with javascript, i'll look into it.

I'll let you know when i made progress,

thanks for your feedback,
Tobias


2010/1/7 djn <de...@kozina.com>

Tobias Strebitzer

unread,
Jan 20, 2010, 7:27:24 PM1/20/10
to fir...@googlegroups.com
Hi dejan,

i just want to let you know about the new version of firefile.

It is fully compatible with firefox 3.5.7-3.6.0 and Firebug 1.5.0.

One of its new Features is to save modified stylesheets to the local hard disk.

Regards,

Tobias

2010/1/7 djn <de...@kozina.com>
--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To post to this group, send email to fir...@googlegroups.com.
To unsubscribe from this group, send email to firebug+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/firebug?hl=en.






--
--
Tobias Strebitzer
Software Engineering
ad: holzweg e-commerce solutions
Sillgasse 12/2.Stock/Top 201
A-6020 Innsbruck
em: tobias.s...@holzweg.com
hp: www.holzweg.com

-----------------------------------------------------------
Medienportal, Community & Logo made by holzweg
                          www.stol.it
-----------------------------------------------------------

djn

unread,
Jan 21, 2010, 1:47:47 PM1/21/10
to Firebug
Hello Tobias!
I've just tried out v. 0.5.1 and I regret to say I've been unable to
make it work as expected. It might well be me missing some step, so
I'll write down what I did so far:

- PC is Windows XP SP3, Firefox is 3.5.7
- clean profile just for testing purposes: Firebug 1.5.0, FireFile
0.5.1, both enabled and apparently OK
- two more extensions I can't remove because they're cross-profile:
Google Gears 0.5.32.0 and FiddlerHook 2.2.1.4 (both disabled)
- a real site (monteanalogo dot net) for target practice
- once the site index page has loaded I click on the FireFile icon and
a window pops up: the Unsaved Changes tab is empty, the Registered
Sites tab is empty too.
- with the Firebug panel open I select an element of the page and
start modifying its style rules (in the left-side Style tab of the
HTML panel); my changes are visibly applied to the page
- just to be sure I change some rule also in the CSS panel; these
chandìges are visibly applied too
- I click again the FireFile icon and the relative window pops up
again
- the Unsaved Changes tab is empty as before, none of the two buttons
does anything
- same for the Registered Sites tab and I don't see a way to add the
current site among the registered

What am I doing wrong?

djn

Tobias Strebitzer

unread,
Jan 22, 2010, 2:37:57 AM1/22/10
to fir...@googlegroups.com
Hey dejan,

there was a bug with v. 0.5.1, please update FireFile to v. 0.5.2:
https://addons.mozilla.org/de/firefox/addon/52365/

Then follow the Screenshot Guide:
http://firefile.strebitzer.at/guide.pdf

Regards, tobias

2010/1/21 djn <de...@kozina.com>
--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To post to this group, send email to fir...@googlegroups.com.
To unsubscribe from this group, send email to firebug+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/firebug?hl=en.



djn

unread,
Jan 22, 2010, 2:37:04 PM1/22/10
to Firebug
Almost there, and I think I found out where the hitch is.

At first I tried 0.5.2 and repeated the procedure as in my precedent
message and... nothing happened, just as before.
Next I tried the same in a Firefox 3.6 in a VM - exactly as above, no
visible change.
But then I moved over to the demo page on your website, entered a
username and password and added that site to the Registered Sites.
Done that, my changes to the previous site suddenly appeared in the
Unsaved Changes box and the FireFile icon changed.

As far as I can tell FireFile did indeed recognize and store correctly
my changes to the CSS, but it didn't display them out for download
until there was at least a registered site listed.


Tobias Strebitzer

unread,
Jan 22, 2010, 3:05:45 PM1/22/10
to fir...@googlegroups.com
Thanks for that hint, i never thought about clearing my sites list. Some others also got your symptoms. I'll fix that issue asap.

tobias

2010/1/22 djn <de...@kozina.com>


--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To post to this group, send email to fir...@googlegroups.com.
To unsubscribe from this group, send email to firebug+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/firebug?hl=en.

Tobias Strebitzer

unread,
Feb 27, 2010, 7:01:39 AM2/27/10
to fir...@googlegroups.com
Hi dejan,
i just released a new version of FireFile CSS remote saving extension.

FireFile FireFox Addon v 0.8.0:
https://addons.mozilla.org/de/firefox/addon/52365

Serverside Script (PHP), not updated:
http://www.strebitzer.at/projects/firefile/firefile.php.zip

New features:
  • autosave feature
  • unified firebug subpanel
  • multi-site management (edit/delete/add) with individual settings (autosave)
  • Improved view on unsaved changes, grouped by sites. Own sidepanel between "style" and "computed style"
  • Change Memory over multiple windows and tabs. Changes can be saved hours later.
  • UI Improvements / Icons / Usuability enhancements
  • save buttons in css sidepanel of html panel
  • Bugfixes
    • drupal/rewrite- bugfixes
    • cache-control bugfixes (GET Parameters on css files, ?F...)
    • Improved error handling and debug output
  • All features work with the existing firefile server php script, no update needed.

If you have any ideas or questions feel free to contact me at tobias.s...@gmail.com

If it's still not working, try turning the "debug mode" on, it's available in the firefile sidepanel of the html firebug panel. Request data (sent and recieved) are then logged to the firebug console.

Thanks,
Tobias


2010/1/22 djn <de...@kozina.com>


--

djn

unread,
Feb 28, 2010, 7:42:24 PM2/28/10
to Firebug
Hello Tobias!
I've just tried out FireFile 0.8.0 and... I'm kinda lost. With the new
interface I don't understand how to save the applied changes!

I've been testing the extension on this very GoogleGroups page, with
the same Firefox test profile as before (Firebug and FireFile only) -
Firefox is now 3.5.8.
On this page I opened Firebug (first 1.5.0, later 1.5.2 with no
difference), selected an element to inspect, changed some values in
the Style subpanel, checked that these were actually applied and then
clicked on the FireFile status bar icon. The subpanel switched to
FireFile, but all I see there are links to the demo account and
manuals. I have debug mode and the other two switches checked, but I
can see no difference between checked and unchecked.

Out of curiosity I tried with a demo account on your server: after
appliyng changes the subpanel showed the site address and a link to
firefile.php, but still no way to save the file. I tried the icons on
the right and managed to rename and then delete the link - and that's
all. I haven't found out what the first icon (the clock) stands for -
a little popup text might be useful there.

I recalled that in 0.5.2 the options button in the Add-ons Firefox
window opened the 'Unsaved changes' panel, but now the Options button
is greyed out...

I might need a little instruction on how to use the extension, I'm
afraid.

By the way, adding the subpanel inside Firebug seems to me a good idea
- on my main work profile the status bar icon got somehow lost among
the various icons there...

Thank you for your patience - and for the good work you're doing with
this extension.

djn

Reply all
Reply to author
Forward
0 new messages